<!--
 * @Author: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @Date: 2022-05-25 16:28:55
 * @LastEditors: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @LastEditTime: 2022-05-25 21:14:35
 * @FilePath: \vue-2202\src\views\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="pic in lunBoList" :key="pic.id">
        <img v-lazy="pic.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        class="van-grid-item"
        v-for="v in grid"
        :key="v.id"
        :icon="v.src"
        :text="v.title"
        :to="v.to"
      />
    </van-grid>
  </div>
</template>
<script>
import { getLunbo, Grid } from "@/api";
export default {
  data() {
    return {
      lunBoList: [],
      grid: [],
      lZimg:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f4055864c2c3a8012060c8dc7eca.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656062295&t=8d8f6e57fbbc13bc0cab071a6303387b",
    };
  },
  methods: {
    async getLunBo() {
      const res = await getLunbo();
      this.lunBoList = res.data.message;
    },
    async getGrid() {
      const res = await Grid();
      this.grid = res.data.message;
    },
  },
  created() {
    this.getLunBo();
    this.getGrid();
  },
};
</script>
<style lang="scss">
.my-swipe {
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.van-grid-item__icon {
  font-size: 60px;
}
</style>
